//1.引入Vue
import Vue from "vue";

//2.引入VueX
import Vuex from 'vuex'

//引入axios\
import axios from "axios";

//3.启动插件Vuex
Vue.use(Vuex)

//创建state属性,该属性日后在引入脚手架之后,所有组件都可以调用
/**
 *
 * @state
 * 1.扩展写法
 * 通过计算属性返回一个对应的state值
 *     count(){
 *       return this.$store.state.count
 *     },
 *     price(){
 *       return this.$store.state.price
 *     }
 * 2.简写:
 * 引入vuex中对应的映射属性mapState
 * 写法: ...mapState(['属性名','属性名','属性名'])
 */
const state = {
  count: 0,
  price: 10086,
  movieList: []
}
//改变count的值
/**
 * @mutations
 * 1.mutations中只能书写同步代码
 * 2.因为当 mutation 触发的时候，回调函数还没有被调用，devtools
 *    不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。
 *
 */
const mutations = {
  increment(state) {
    state.count++
  },
  decrement(state) {
    state.count--
  },
//  累加3
  incrementN(state, {n}) {
    state.count += n
  },
//  设置请求
  setMovieList(state, movieList) {
    state.movieList = movieList
  }
// 'https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a'
}
//书写异步请求
const actions = {
  incrementWait({commit}) {
    setTimeout(() => {
      commit('increment')
    }, 2000)
  },
  decrementWait({commit}) {
    setTimeout(() => {
      commit('decrement')
    }, 2000)
  },
  async getMovieList({commit}) {
    const re = await axios.get('https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a')
    commit('setMovieList',re.data.data.list)

  }
}

//创建过滤,获取想要的数据
const getters = {
  getMyMovieList(state){
    return state.movieList.filter((movie) => {
      return movie.albumName.length<=6 && movie.albumName.length>= 4
    })
  },
  getYourMovieList(state){
    return ({start,end})=>{
      return state.movieList.filter((movie) => {
        return movie.albumName.length<=end && movie.albumName.length>= start
      })
    }
  }
}
//4.创建store仓库
export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})